import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView, Image } from '@tarojs/components'
import { DNavBar, DItemError } from '@/components'
import './carinformation.scss'
import http from '@/api'
import sdk from '@/common/sdk'
const right = require('../assets/icon_right.png')
export default class CarInformation extends Component {

    constructor(props) {
        super(props)
        this.state = {
            page: 1,
            limit: 10,
            totalPage: 1,
            scrollStyle: window.screen.availHeight,
            order: "",
            sidx: "",
            status: "",
            meType: '',
            title: '互动通知',
            list: [],
            footerStatus: false
        }
    }
    componentWillMount() {
        let { type = '1' } = this.$router.params
        let { title } = this.state
        if (type === '1') {
            title = '系统通知'
        } else if (type === '2') {
            title = '业务消息'
        } else if (type === '3') {
            title = '互动通知'
        }
        this.setState({
            meType: type,
            title
        }, () => {
            this.getMessageList()
        })
    }

    componentDidShow() {
        sdk.setTitleInfo(this.state.title)
    }

    getMessageList() {
        let { meType, page, limit, order, sidx, status, totalPage, list } = this.state
        let obj = {
            page,
            limit,
            order,
            sidx,
            status,
            meType
        }
        if (page > totalPage) {
            this.setState({
                footerStatus: true
            })
            return
        }
        http.getMessageList(obj).then(data => {
            let _list = data.list
            console.log('%c [ _list ]', 'font-size:13px; background:pink; color:#bf2c9f;', _list)
            let itemTine = [], itemlist = [], info = []
            _list.map((item, j) => {
                itemTine.push(item.dateTime)
                info[j] = []
                item.appMessages.map((_item, i) => {
                    info[j].push({
                        title: _item.title,
                        desc: _item.meContent,
                        url: _item.detail_url
                    })
                })
            })
            itemTine.map((item, k) => {
                itemlist.push({
                    time: item,
                    info: info[k]
                })
            })
            let totalList = [...list, ...itemlist]
            this.setState({
                list: totalList,
                totalPage: data.totalPage
            })

        })
    }

    onScroll = () => {
        this.setState({
            page: this.state.page + 1
        }, () => this.getMessageList(true))
    }
    handleDetial(url = '') {
		debugger
        // 跳转原生页面
        if (url === '/pages/carinformation/carinformation') {
            return sdk.setSkipCustom(4)
        }
        if (url) {
            Taro.navigateTo({
                url
            })
        }

    }

    render() {
        const {
            list,
            title,
            scrollStyle,
            footerStatus
        } = this.state
        const itemHtml = () => {
            return <View className='b_carinformation__list'>
                {
                    list && list.map((item, i) => {
                        return <View className='b_carinformation__list_item' key={i}>
                            {item.time && <View className='b_carinformation__list_time'>{item.time}</View>}
                            {
                                item.info && item.info.map((_item, j) => {
                                    return <View className='b_carinformation__list__item' key={j} onClick={this.handleDetial.bind(this, _item.url)}>
                                        <View className='b_carinformation__list_title'>{_item.title}</View>
                                        <View className='b_carinformation__list_desc'>{_item.desc}</View>
                                        {_item.url?<View className='b_carinformation__detail'>
                                            <View className='b_carinformation__list_btn' >查看详情</View>
                                            <View>
                                                <Image src={right} className='b_carinformation__detail_img'></Image>
                                            </View>
                                        </View>:''}

                                    </View>
                                })
                            }
                        </View>
                    })
                }
            </View>
        }
        return (
            <View className='b_carinformation'>
                <DNavBar title={title}></DNavBar>
                <View className='b_carinformation__box'>
                    <View className='b_carinformation__content'>
                        <ScrollView
                            scrollY
                            scrollWithAnimation
                            lowerThreshold='20'
                            style={`height:${scrollStyle - 50}PX`}
                            onScrollToLower={this.onScroll}>
                            {itemHtml()}
                            {
                                footerStatus && <View className='b_carinformation__more'>暂无更多</View>
                            }
                        </ScrollView>
                    </View>
                </View>
                {
                    list.length === 0 && <DItemError></DItemError>
                }
            </View>
        )
    }
}
